www.gusucode.com > 立体效果的搜索框 HTML5特效源码程序 > 立体效果的搜索框 HTML5特效/纯CSS3 3D搜索框/纯CSS3 3D搜索框/styles.css

    /*
 *	Title: CSS3 Solid UI
 *	Author: Bharani M
 * 	URL: http://www.hongkiat.com
*/
  
/*-------------------BASE STYLES--------------------*/
html, body
{
	padding: 0;
	margin: 0;
}

html	{
	background: #f8f4e8 url("bg_tile.jpg") left top repeat;
}

body	{	
	font: 16px/1.5 Calibri, Helvetica, Arial, sans-serif;
}

#wrapper	{
	width: 430px;
	margin: 200px auto;
}
	
	
h1	{
	font-family: 'Oswald', Calibri, "Helvetica Neue", Arial, serif;
	font-size: 54px;
	font-weight: bold;
}
	
p	{
	color: #545454;
	margin-top: 50px;
}
	
a	{
	text-decoration: none;
	color: #000;
	padding-bottom: 1px;
}
	
a:hover, a:focus	{
	border-bottom: 1px dotted #000;
}
	
/*---------------------SEARCH FIELD--------------------*/
#main	{
	width: 400px;
	height: 50px;
	background: #f2f2f2;
	padding: 6px 10px;
	border: 1px solid #b5b5b5;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"]	{
	float: left;
	width: 230px;
	padding: 15px 5px 5px 5px;
	margin-top: 5px;
	margin-left: 3px;
	border: 1px solid #999999;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid	{
	float: left;
	cursor: pointer;
	width: 130px;
	padding: 8px 6px;
	margin-left: 20px;
	background-color: #f8b838;
	color: rgba(134, 79, 11, 0.8);
	text-transform: uppercase;
	font-weight: bold;
	border: 1px solid #99631d;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/*Download by http://www.codesc.net*/
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); 
	
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

	-webkit-transition: background 0.2s ease-out;
}
	
input[type="submit"].solid:hover, input[type="submit"].solid:focus	{
	background: #ffd842;
		
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}
	
input[type="submit"].solid:active	{
	background: #f6a000;
	position: relative;
	top: 5px;
	border: 1px solid #702d00;
	
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}